<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/layui/css/layui.css?t=1616353046768" media="all">
    <script src="/layui/layui.js?t=1616353046768"></script>
</head>
<body class="pear-container">

<table class="layui-hide" id="demo" lay-filter="role-table"></table>


<script type="text/html" id="role-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>

<script type="text/html" id="role-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit" style="background-color:red;color: white">
        <i class="layui-icon layui-icon-edit">取消轮播</i>
    </button>
</script>


</body>
</html>
<script>
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function() {
        var laydate = layui.laydate, //日期
            layer = layui.layer, //弹层
            table = layui.table, //表格
            element = layui.element,//元素操作
             $ = layui.jquery; //ajax

        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
                tips: 1
            });
        });

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , height: 420
            , url: '{:url("index")}' //数据接口
            , title: '用户表'
            , limit :5
            , limits : [5,10,15]
            , page: true //开启分页
            , toolbar: "#role-toolbar"  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [[ //表头
                  {field: 'title', title: '标题'}
                , {field: 'author', title: '作者'}
                , {field: 'date', title: '发布时间', sort: true,}
                , {field: 'content', title: '文章摘要'}
                , {field: 'reading', title: '阅读次数', sort: true}
                , {field: 'collection', title: '收藏次数', sort: true}
                {if in_array("banner_delete",$userInfo)}
                    , {fixed: 'right', title: "操作", idth: 165, align: 'center', toolbar: '#role-bar'}
                {/if}
            ]]
        });


        table.on('toolbar(role-table)', function(obj){
            if(obj.event === 'add'){
                window.add();
            }
        });

        {if in_array("banner_delete",$userInfo)}
            table.on('tool(role-table)', function(obj){
                if(obj.event === 'edit'){
                    window.edit(obj);
                }
            });

            window.edit = function(obj) {
                layer.msg('文章修改中...', {
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function () {
                    $.ajax({
                        url: "{:url('edit')}",
                        type: "POST",
                        data: {id: obj.data.id},
                        dataType: "JSON",
                        success(res) {
                            layer.msg(res.msg);
                            setTimeout(function () {
                                layer.closeAll();
                                if (res.code == 1) {
                                    obj.tr[0].remove();
                                }
                            }, 1000);
                        }
                    })
                });
            }
        {/if}


        window.add = function(){
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                area: ['1000px', '600px'],
                content: 'add.html'
            });
        };


        window.remove = function(obj){
            console.info(obj);
        }
    });
</script>

